<template>
	<div class="LookorderHome">
		<!--分页工具条-->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page.sync="currentPage4" :page-sizes="[5, 10,15,20]" :page-size="pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
		</el-pagination>
		<el-table :data="orderList" style="width: 100%" :row-class-name="tableRowClassName"
			@selection-change="handleSelectionChange" :cell-class-name="cellClassName">
			<el-table-column prop="buy_id" label="订单号" align="center" header-align="center">
			</el-table-column>
			<el-table-column label="图片" width="" align="center" header-align="center">
				<template v-slot="scope">
					<el-image style="width: 80px; height: 80px"
						:src="require('@/assets/img/'+scope.row.book_pic+'.jpg')" />
				</template>
			</el-table-column>
			<el-table-column prop="bid" label="书本编号" align="center" header-align="center">
			</el-table-column>
			<el-table-column prop="book_name" label="书本名称" width="100" align="center" header-align="center">
			</el-table-column>
			<el-table-column prop="order_address" width="180" label="收货地址" align="center" header-align="center">
			</el-table-column>
			<el-table-column prop="order_phone" width="150" label="电话" align="center" header-align="center">
			</el-table-column>
			<el-table-column prop="book_membalance" label="购买价格" align="center" header-align="center">
			</el-table-column>
			<el-table-column prop="book_status" label="订单状态" align="center" header-align="center">
			</el-table-column>
			<el-table-column align="center" label="操作" width="" v-slot="scope" header-align="center">
				<el-row>
					<el-button type="primary" @click="receiptorder(scope.$index,scope.row)" :disabled="scope.row.book_status === '已签收'">签收</el-button>
				</el-row>
				<el-row>
					<el-button type="danger" @click="removeorder(scope.$index,scope.row)">删除</el-button>
				</el-row>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				orderList: [],
				book_name: '',
				book_balance: '',
				bid: '',
				buy_id: '',
				currentRowIndex: '',
				dataonLineListSelections: [],
				// 每页显示的条数
				pageSize: 10,
				// 总记录数
				totalCount: 100,
				// 当前页码
				currentPage: 1,
			}
		},
		created() {
			this.findByPages();
			this.$nextTick(() => { //重新渲染分页
				this.pageshow = true;
			});
		},
		methods: {
			findOrder() {
				var _this = this;
				axios.post('http://localhost:8080/order/ordertoum')
					.then(res => {
						_this.orderList = res.data; //响应数据给bookList赋值
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			findByPages() {
				axios({
					method: "post",
					url: "http://localhost:8080/order/selectbypc?currentPage=" + this
						.currentPage + "&pageSize=" + this.pageSize,
				}).then(res => {
					//设置表格数据
					this.orderList = res.data.rows; // {rows:[],totalCount:100}
					//设置总记录数
					this.totalCount = res.data.totalCount;
				})
			},
			//分页
			handleSizeChange(val) {
				//console.log(`每页 ${val} 条`);
				// 重新设置每页显示的条数
				this.pageSize = val;
				this.findByPages();
			},
			handleCurrentChange(val) {
				//console.log(`当前页: ${val}`);
				// 重新设置当前页码
				this.currentPage = val;
				this.findByPages();
			},
			removeorder(index, row) {
				this.currentRowIndex = row.row_index;
				this.buy_id = this.orderList[this.currentRowIndex].buy_id;
				this.$confirm('此操作将永久删除该图书, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.post('http://localhost:8080/order/deleteOrder', 'buy_id=' + this.buy_id)
						.then(res => {
							if (res.data = "success") {
								this.$message({
									type: 'success',
									message: '恭喜您删除成功!',

								});
								this.findByPages();
							} else {
								this.$message({
									type: 'warning',
									message: res.data
								});
							}
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			receiptorder(index, row) {
				this.currentRowIndex = row.row_index;
				this.buy_id = this.orderList[this.currentRowIndex].buy_id;
				if (row.book_status == "未签收") {
					this.$confirm('是否确认签收该订单?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						axios.post('http://localhost:8080/order/receiptorder', 'buy_id=' + this.buy_id)
							.then(res => {
								if (res.data = "success") {
									this.$message({
										type: 'success',
										message: '恭喜您签收成功!',

									});
									this.findByPages();
								} else {
									this.$message({
										type: 'warning',
										message: res.data
									});
								}
							})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				}
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				row.row_index = rowIndex;
				if (rowIndex % 4 === 0) {
					return 'warning-row';
				} else if (rowIndex % 4 === 2) {
					return 'success-row';
				}
				return '';
			},
			cellClassName({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (column.label == "订单情况") {
					switch (row.book_status) {
						case "已签收":
							alert(1)
							return "status1";
							break;
						case "未签收":
							alert(2)
							return "status2";
							break;
					}
				}
			}
		},
	}
</script>

<style>
	.LookorderHome {
		width: 910px;
		margin-top: 40px;
	}

	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}

	.el-table .status1 {
		color: red;
	}

	.el-table .status2 {
		color: lightgreen;
	}
</style>
